<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index4.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
	</head>

	<body>
		<!--<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
            	src="music/bgm.mp3">
      		<!--你的浏览器版本太低，不支持audio标签-->
	<!--</audio>-->
<!--<embed src="music/bgm.mp3" width="0" height="0"></embed>-->
		
		<audio src="music/bgm.mp3" id="yy" autoplay="autoplay" loop="loop"></audio>
		<!--<bgsound src="music/bgm.mp3" autostart=true loop="-1" />-->
		
		<img src="img/1.png" id="beijing" alt="" />
	
		<img src="img/p4-1.png" id="img1" alt="" />
		<img src="img/p4-4.png" id="img4" alt="" />
		<img src="img/p4-2.png" id="img2" alt="" />
		<img src="img/p4-3.png" id="img3" alt="" />
		
		<img src="img/p4-5.png" id="img5" alt="" />
		<img src="img/p4-6.png" id="img6" alt="" />
		<div id="box1">

			<input type="text" name="" id="ipt1" value="" / placeholder="输入姓名">
			<input type="sex" name="" list="sexlist" id="ipt2" value="" / placeholder="选择职业">
			<div id="chose">
				<p>学生</p>
				<p>上班族</p>
			</div>
			<!--<div id="box2">-->
			<!--<label for="sex"</label>
				<select id="sex" bootstrap="dromup" >
					<option>学生</option>
					<option>上班族</option>
				</select>-->
			<!--</div>-->

		</div>
		<div id="zhezhao1">
			<div id="zhezhao">

			</div>
			<img src="img/p4-7.png" id="img7" alt="" />
		</div>
			<img src="img/yinyue.gif" / id="yingyue">
		<img src="img/close.png" id="close" alt="" />
		<script src="css/cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="css/animateBak.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var box1=document.getElementById('box1')
			var img1 = document.getElementById('img1')
			var img2 = document.getElementById('img2')
			var img3 = document.getElementById('img3')
			var img4 = document.getElementById('img4')
			var img5 = document.getElementById('img5')
			var img6 = document.getElementById('img6')
			var ipt2 = document.getElementById('ipt2')
			var chose = document.getElementById('chose')
			var p = document.querySelectorAll("#chose p")
			var zhezhao = document.getElementById('zhezhao1')
			console.log(zhezhao)

			animate(img1, {
				opacity: 1
			})

			var times = setTimeout(function() {
				animate(img2, {
					left: 0
				});
			})
			var times = setTimeout(function() {
				animate(img3, {
					left: 0
				})
			}, 2000)
			var times = setTimeout(function() {
				animate(img4, {
					top: 0
				})
			}, 3000)
			var times = setTimeout(function() {
				animate(img5, {
					opacity: 1
				})
			}, 4000)
			var times = setTimeout(function() {
				animate(img6, {
					opacity: 1
				})
			}, 5000)
			var times=setTimeout(function(){
				animate(box1,{
					opacity: 1
				})
			},5000)
			ipt2.onclick = function() {
				chose.style.display = 'inline-block'
			}
			console.log(p.length)
			console.log(p[0].innerHTML)
			for(var i = 0; i < p.length; i++) {
				console.log(p[i].innerHTML)
				var ip = p[i].innerHTML
				p[i].onclick = function(res) {
					chose.style.display = 'none'
					//					console.log(p[i])
					ipt2.value = res.target.innerHTML
					console.log(res.target.innerHTML)
				}

			}
			img6.onclick = function() {
				if(ipt2.value && ipt1.value) {
					setCookie('taken',ipt1.value,30)
					location.href = 'index5.html'
				} else {
					zhezhao.style.display = 'block'
					zhezhao.onclick=function(){
					zhezhao.style.display = 'none'	
					}
				}
			}
			
			//			animate(img3,{left:0})
			//			animate(img4,{top:0})
			//			animate(img5,{opacity:1})
			//			animate(img6,{opacity:1})
			var audi = document.getElementById('yy')
			var close = document.getElementById('close')
			var yingyue = document.getElementById('yingyue')
			yingyue.onclick = function() {
				audi.pause()
				console.log(1)
				yingyue.style.display = 'none'
				close.style.display = 'inline-block'

			}
			close.onclick = function() {
				audi.play()
				//				console.log(1)
				yingyue.style.display = 'inline-block'
				close.style.display = 'none'
			}
		</script>
	</body>

</html>